<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="formbox">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <template #left-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouji"></use>
            </svg>
          </template>
        </van-field>

        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: /\w{6,18}/,
              message: '密码长度在6~18之间，只能包含字母、数字和下划线',
            },
          ]"
        >
          <template #left-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yanzhengma"></use>
            </svg>
          </template>
        </van-field>

      
        <div style="margin: 16px">
          <van-button type="primary" native-type="submit" size="large"
            >登录</van-button
          >
          <div class="misc">
            <p class="password" @click="$router.push('/forgetpassword')">
              忘记密码
            </p>
            <p class="password">修改密码</p>
            <p @click="$router.push('/reg')">去注册</p>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { Form } from "vant";
import { Field } from "vant";
export default {
  name: "login",
  data() {
    return {
      username: "", //手机
      vercode: "", //验证码
      password: "",
    };
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
  },
  created() {},
  // 挂载后
  mounted() {},
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.get_login();
    },
    get_login() {
      let { username, password } = this;
      this.$http({
        url: "/user/login",
        method: "POST",
        //传参
        data: {
          username,
          password,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$toast("登录成功");
          let { token, username, uid, tokenExpired, userInfo,liked_num,publish_num } = res;
          localStorage.setItem("tt-token", token);
          // localStorage.setItem("tt-username", username);
          // localStorage.setItem("tt-tokenExpired", tokenExpired);
          localStorage.setItem("tt-uid", uid);
          localStorage.setItem("tt-userInfo", JSON.stringify(userInfo));

          this.$store.commit("change", { key: "uid", value: uid });
          this.$store.commit("change", { key: "userInfo", value: userInfo });
          this.$store.commit("change", { key: "token", value: token });
          this.$store.commit("change", { key: "isLogin", value: true });
          this.$store.commit("change", { key: "liked_num", value: liked_num });
          this.$store.commit("change", { key: "publish_num", value: publish_num });
          setTimeout((v) => {
            this.$router.back();
          }, 2000);
        } else {
          this.$toast(res.msg || "登录失败");
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.login {
  .formbox {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
  }
  svg {
    width: 20px;
    height: 20px;
  }
  ::v-deep .van-button--primary {
    margin-top: 30px;
  }
  /*::v-deep .van-button--small {
    border-radius: 15px;
    background-color: #ededed;
    border: none;
    color: #666666;
  }*/

  .misc {
    display: flex;
    justify-content: space-around;
    .password {
      width: 30%;
      border-right: 1px solid #999;
    }
  }
}
</style>